<template>
	<!-- 工地招工/除了发布招工的详情页和首页找工人详情页组件 -->
  <view>
    <view :class="layerHidden ? 'layer-hidden' : ''" class="container">
      <view :style="{ height: statusBarHeight }"></view>

      <view
        :style="{
        
          height: titleBarHeight + 40 + 'px',
        }"
        class="searchBox"
      >
	  <!-- #ifdef MP-WEIXIN:在微信小程序平台存在的代码 -->
        <!-- #ifdef MP-WEIXIN -->

        <view
          :style="{
            background: '#fff',
            height: titleBarHeight + 'px',
            width: '100%',
          }"
        >
          <view
            class="titleBar1"
            :style="{
              // width: titleBarWidth + 'px',
              height: titleBarHeight + 'px',
            }"
          >
          	<u-search class="search1" bg-color="#F7F8FA" placeholder="搜索你想要的工人" v-model="keyword"
							:show-action="false" @change="search">
						</u-search>
            <!-- <u-search
            @click="goSearch"
              class="search1"
              bg-color="#F7F8FA"
              placeholder="搜索你想要的工人"
              v-model="keyword"
              disabled=""
              :show-action="true"
              action-text="搜索"
              :animation="true"
            >
            </u-search> -->
          </view>
        </view>

        <!-- #endif -->
		<!-- #ifdef:条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。 -->
        <!-- #ifdef H5:除了 H5 平台，其它平台均存在的代码 -->
		<!-- #ifdef H5 -->
		
		
		<!-- 工地招工/除了发布招工的详情页的搜索框 -->
        <view class="titleBar">
           	<!-- <u-search class="search1" bg-color="#F7F8FA" placeholder="搜索你想要的工人" v-model="keyword"
							:show-action="false" @change="search">
			</u-search> -->
          <!-- <u-search
            class="search"
            bg-color="#F7F8FA"
            placeholder="搜索你想要的工人"
            v-model="keyword"
            disabled=""
            :show-action="true"
            action-text="搜索"
            :animation="true"
          >
          </u-search> -->
        </view>
        <!-- #endif -->
		
        <view class="u-m-p-50">
          <view class="u-demo-area u-flex u-row-center">
            <!-- <pickerAddress ref="addr" @fnpickerAddress="fnpickerAddress" class="inp" ></pickerAddress> -->
            <!-- 位置 -->
			<div class="addrBox">
				<!-- pickerAddress:城市选择器的使用（省市区三级联动） -->
              <pickerAddress
                class="addr"
                ref="addr"
                @fnscroll="fnscroll"
                @fnpickerAddress="fnpickerAddress"
              >
              </pickerAddress>
			  <!-- u-icon:icon图标 -->
              <u-icon
                color="rgb(192, 196, 204)"
                class="icons"
                name="arrow-down"
              ></u-icon>
            </div>
			<!-- 下拉图标 -->
			<!-- u-dropdown内容自定义时设置高度，滑动时会带动父级，真机滑动会出现问题 -->
            <u-dropdown
              @close="handleClose"
              @open="handleOpen"
              :close-on-click-mask="mask"
              ref="uDropdown"
              :activeColor="activeColor"
              :borderBottom="borderBottom"
            >
              <u-dropdown-item></u-dropdown-item>
              <u-dropdown-item
                @change="categrey"
                v-model="personStruct"
                :title="catetitle"
                :options="options2"
              >
              </u-dropdown-item>
			  
              <u-dropdown-item :title="wortypetitle">
                <div class="workType">
                  <workType @closeDropdown="closeDropdown" />
                </div>
              </u-dropdown-item>
			  
              <u-dropdown-item
                @change="changeRecomand"
                v-model="orderSort"
                :title="recomandTitle"
                :options="options1"
              >
              </u-dropdown-item>
            </u-dropdown>
          </view>
        </view>
      </view>

      <!-- 占位 -->
      <!-- <view :style="{ height: statusBarHeight }"></view> -->

      <!-- #ifdef MP-WEIXIN -->
      <view
        :style="{ 'margin-top': '90px' }"
        class="list"
      >
        <myitem v-if="list.length" :list="list" />
        <u-empty class="empty" v-else text="暂无数据" mode="list"></u-empty>
      </view>

      <!-- #endif -->
	  
      <!-- #ifdef H5 -->
      <view :style="{ 'margin-top': '75px' }" class="list">
        <myitem v-if="list.length" :list="list" />
        <u-empty class="empty" v-else text="暂无数据" mode="list"></u-empty>
      </view>

      <!-- #endif -->

      <!-- u-loadmore:用于列表中，做滚动加载使用，展示 loading 的各种状态。 -->
      <u-loadmore
        v-if="list.length != 0"
        :status="status"
        @loadmore="loadmore"
      ></u-loadmore>
    </view>
  </view>
</template>

<script>
import pickerAddress from "@/components/citys/pickerAddress.vue";
import myitem from "@/components/list/firsrPage.vue";
import workType from "@/components/workType.vue";
import api from "../../api/routes.js";
	import {
		mapGetters,mapMutations
	} from 'vuex'
export default {
  components: {
    pickerAddress, //地址数据
    myitem, //期望工作地？
    workType,
  },
  data() {
    return {
      layerHidden: false,

      personStruct: "",

      enable: true,

      statusBarHeight: 0,
      titleBarHeight: 0,
      titleBarWidth: 0,

      options2: [],

      // cityArr: [],
      orderSort: undefined,
      // city: "地区",
      page: 1,
      limit: 10,
      status: "loadmore",
      list: [],
      // 拿到的数据总条数
      total: 0,
      //判断是否发送请求的条件
      load: false,
      workType: "",
      wortypetitle: "工种",
      catetitle: "分类",

      keyword: "",
      classify: "",
      addr: true,
      mask: true,
      recomandTitle: "智能推荐",
      options1: [
        {
          label: "最新发布",
          value: 1,
        },
        {
          label: "智能推荐",
          value: 2,
        },
        {
          label: "工资最高",
          value: 3,
        },
        {
          label: "热门推荐",
          value: 4,
        },
      ],

      borderBottom: false,
      activeColor: "#2979ff",
      lablesBox: [],
    };
  },
  
  
  computed: {
  	...mapGetters(['citiesInfor']),
  },
  onShow() {

      uni.removeStorageSync('city')
      uni.removeStorageSync('city1')

    	console.log(this.$store.state.findWorkersPage,666666)

    	if(this.$store.state.findWorkersPage){
					// this.page++;
			}else{
				this.list = [];
				this.page = 1;
				 this.getList();
			}
    
   
     this.setSearchPage(0);
    this.setsiteRecruitmentPage(0)
  },

  onLoad() {
    // #ifdef MP-WEIXIN
    const SystemInfo = wx.getSystemInfoSync();
    this.statusBarHeight = SystemInfo.statusBarHeight;
    // #endif
  
    this.getCategrey();
  },
   onReachBottom() {
     if (this.status === "loadmore") {
      this.loadmore();
    }
  },
  onReady() {
    // #ifdef MP-WEIXIN

    this.titleBarHeight =
      (uni.getMenuButtonBoundingClientRect().top - this.statusBarHeight) * 2 +
      uni.getMenuButtonBoundingClientRect().height;
    this.titleBarWidth =
      uni.getSystemInfoSync().windowWidth -
      uni.getMenuButtonBoundingClientRect().width -
      (uni.getSystemInfoSync().windowWidth -
        uni.getMenuButtonBoundingClientRect().right) *
        2;
    // #endif
  },
  methods: {
    ...mapMutations(["setSearchPage",'setsiteRecruitmentPage']),
    		search(e) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 50,
				});
				this.list = [];
				this.page = 1;
				this.getList();
			},
    	// goSearch() {
			// 	uni.navigateTo({
			// 		url: "/package/pages/searchJob/comSearch/comSearch2",
			// 	});
			// },
      fnscroll(e){
        console.log(e,4444444444444);
      },
   fnpickerAddress(val) {
			   uni.pageScrollTo({
        scrollTop: 0,
        duration: 50,
      });
      this.list = [];
      this.page = 1;
      val.status ? uni.hideTabBar() : uni.showTabBar();
      this.layerHidden = val.status;
			if(val.loadDate){
				this.getList();
			}
    },
    async getCategrey() {
      const options2 = await this.$myRequest({
        url: api.dictionary,
        method: "GET",
        data: {
          code: "person_struct",
        },
      });
      this.options2 = options2.data.list.map((i) => {
        return {
          label: i.dict_name,
          value: i.dict_value,
          id: i.id,
        };
      });
    },

    async getList() {
      // 判断当前是否在请求，如果为true正在请求数据，就让他返回空，如果为false没在请求，就让它开始请求数据
      if (this.load) {
        return;
      }
      this.load = true;
      // 请求数据时，状态改为加载中状态
      this.status = "loading";
      const res = await this.$myRequest({
        url: api.pageWorkerList,
        method: "POST",
        data: {
          page: this.page,
          limit: this.limit,
          key: this.keyword, //搜索关键词
          personStruct: this.personStruct,
          recommend: this.orderSort, //1:热门,2:最新,3:推荐，热门
          province: this.citiesInfor[0], //省
          city: this.citiesInfor[1], //市
          district: this.citiesInfor[2], //区
          workType: this.workType, //工种ID
        },
      });
      // 请求完以后，将load改为false，方便下一次发送请求
      this.load = false;
      // 判断获取的数据是否正确，当res.code=0时，数据正确
      if (res.data.code !== 0) {
        // 当获取到的数据不正确时，给用户错误提示信息
        return uni.showToast({
          title: res.msg,
          icon: "none",
        });
        //并将状态码改为nomore，没有更多了
        this.status = "nomore";
      }

      // 如果从接口中获取到的数据是正确的，获取到数据的总条数
      this.total = res.data.page.totalCount;
      // 将获取到的数据给数据列表，此处是解构，不适合用push
      this.list = [...this.list, ...res.data.page.list];
      // 调用ismore方法 ，判断时候还有数据
      this.list.map((i) => {
        let labels = this.lablesBox.filter((r) =>
          i.work_type_ids.includes(r.id)
        );

        this.$set(i, "labels", labels);
        let personStruct = this.options2.filter(
          (r) => r.value == i.person_struct
        );

        this.$set(i, "type", personStruct&&  personStruct.length? personStruct[0].label:'')
      });
      this.ismore();
    },
    // 判断是否还有更多数据
    ismore() {
      // 判断当数据总数等于数据列表的长度时，此时已经获取到全部数据，没有更多了，将加载状态改为nomore
      if (this.total === this.list.length) {
        this.status = "nomore";
        // 否则，将状态改为loadmore，仍然还有数据
      } else {
        this.status = "loadmore";
      }
    },
    // 加载下一页的数据
    loadmore() {
      // 每次出发该方法，都要使页数加一
      this.page++;
      // 页数加一后，在调用getList方法，获取下一页的数据
      this.getList();
    },
    handleOpen() {
      this.layerHidden = true;
      // uni.hideTabBar();
    },
    handleClose() {
      this.layerHidden = false;
      // uni.showTabBar();
    },
    changeRecomand(index) {
      this.recomandTitle = this.options1[index - 1].label;
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 50,
      });
      this.list = [];
      this.page = 1;
      this.getList();
    },

    closeDropdown(val) {
      this.$refs.uDropdown.close();
      this.layerHidden = false;
      let sendIds = "";
      if (val && val.length) {
        let ids = val.map((i) => i.id);
        sendIds = ids && ids.length ? ids.join(",") : "";
        this.wortypetitle = val.length ? `工种${val.length}个` : "工种";
      } else {
        this.wortypetitle = "工种";
      }
      this.workType = sendIds;
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 50,
      });
      this.list = [];
      this.page = 1;
      this.getList();
    },

    // change(data) {
    //   uni.pageScrollTo({
    //     scrollTop: 0,
    //     duration: 50,
    //   });
    //   this.list = [];
    //   this.page = 1;
    //   this.cityArr = data.data;
    //   this.city = data.data[2];
    //   this.getList();
    // },
    categrey(index) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 50,
      });
      this.list = [];
      this.page = 1;
      this.catetitle = this.options2[index - 1].label;
      this.personStruct = this.options2[index - 1].value;
      this.getList();
    },
  },
};
</script>
<style>
page {
  background: #efefef;
}
</style>
<style scoped lang="scss">
.workType {
  height: calc(100vh - 120px - var(--window-bottom));
}
.empty {
  display: block;
  text-align: center;
  margin: 0 auto;
  padding: 150px 0 0 0;
}

.searchBox {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 4;
  background: #ffffff;

  .titleBar1 {
    display: flex;
    align-items: center;
    justify-content: center;

    .search1 {
      width: 95%;
    }
  }

  .titleBar {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search {
    height: 100%;
    width: 94%;
    padding: 0 3%;
    background: #ffffff;
  }
}

.u-m-p-50 {
  height: 40px;
}

.u-row-center {
  position: relative;
  z-index: 2;
  background: #ffffff;
  .addrBox {
    position: absolute;
    left: 0;
    width: 25%;
    height: 80rpx;
    // line-height: 80rpx;
    z-index: 999;
    background: #ffffff;
    text-align: center;
    color: rgb(96, 98, 102);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;

    .addr {
      width: 120upx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      word-break: break-all;
    }

    .icons {
      width: 20upx;
      margin-left: 4px;
    }
  }
}

.u-config-wrap {
  padding: 40rpx;
}

.slot-content {
  background-color: #ffffff;
  padding: 24rpx;

  .item-box {
    margin-bottom: 50rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      border: 1px solid $u-type-primary;
      color: $u-type-primary;
      padding: 8rpx 40rpx;
      border-radius: 100rpx;
      margin-top: 30rpx;
    }

    .active {
      color: #ffffff;
      background-color: $u-type-primary;
    }
  }
}
.layer-hidden {
  height: 100vh;
  overflow: hidden;
}
</style>
